<template>
  <div class="index-box">
    <div class="content">
      <div class="left_panel">
        <el-button class="exit_login_btn" link type="danger" @click="showExitDialog = true">
          <template #icon>
            <el-icon>
              <SwitchButton/>
            </el-icon>
          </template>
          退出登录
        </el-button>
        <h2>在线考试系统</h2>
        <el-menu :default-active="default_active" :collapse="!showLeftPanel">
          <el-menu-item index="0" @click="changeRoute('welcome','0')">
            <template #title>
              <el-icon>
                <School/>
              </el-icon>
              <span>首页</span>
            </template>
          </el-menu-item>

          <el-menu-item index="1" @click="changeRoute('userInfo','1')">
            <template #title>
              <el-icon>
                <User/>
              </el-icon>
              <span>个人中心</span>
            </template>
          </el-menu-item>

          <el-menu-item index="2" @click="changeRoute('myclass','2')">
            <template #title>
              <el-icon>
                <Connection/>
              </el-icon>
              <span>我的班级</span>
            </template>
          </el-menu-item>

          <el-menu-item index="3" @click="changeRoute('myexam','3')">
            <template #title>
              <el-icon>
                <document/>
              </el-icon>
              <span>我的考试</span>
            </template>
          </el-menu-item>
        </el-menu>
      </div>
      <div class="right_content">
        <router-view></router-view>
      </div>
    </div>
    <el-dialog v-model="dialogShow" title="提示" width="15%" align-center :show-close="false" center
               @close="dialogClose">
      <p>{{ dialogMsg }}</p>
      <template #footer>
        <el-button type="success" @click="dialogShow = false">确定</el-button>
      </template>
    </el-dialog>
  </div>
  <el-dialog title="退出登录" v-model="showExitDialog">
    你确定要退出登录吗？
    <el-button type="primary" @click="exitLogin">确定</el-button>
    <el-button @click="showExitDialog = false">取消</el-button>
  </el-dialog>
  <el-dialog @close="Router().push({name:'login'})" v-model="showExitSuccess">
    已退出登录
  </el-dialog>
</template>

<script lang="ts">
import {defineComponent} from "vue";
import MyTextDialog from "../../components/MyTextDialog.vue";
import router from "../../router/router";
import {devUrl} from "../../request/MyAxios"
import {PageStore, UserStore} from "../../store/store";
import {User} from "../../types/mytypes";
import {log} from "../../tools/logTools";
import Router from "../../router/router";

export default defineComponent({
  components: {MyTextDialog},
  data() {
    return {
      user: {} as User,
      isTeacher: false,
      dialogShow: false,
      dialogMsg: '',
      dialogClose: () => {
      },
      userHead: "",
      userSignature: '你还没有签名哦~',
      showLeftPanel: true,
      autoList: '',
      default_active: "0",
      showExitDialog: false,
      showExitSuccess: false
    }
  },
  mounted() {
    let user: User = UserStore.getUser();
    //console.log(user);

    //当用户未登录时弹出弹窗提示用户，并将用户导向至登录页
    if (user.id === undefined) {
      this.dialogClose = () => {
        router.push({name: 'login'})
      }
      this.dialogMsg = '你还没有登录哦，将为你跳转到登录页'
      this.dialogShow = true;
    }
    this.user = user;
    this.userSignature = user.signature as string;
    this.userHead = devUrl + user.head;
    //console.log(this.user);
    //跳转至上次访问的页，若没有，则跳转至欢迎页
    let nowpage: string | undefined = PageStore.getNowPage();
    this.default_active = PageStore.getNowIndex();
    if (nowpage != undefined) {
      router.push({name: nowpage});
    } else {
      router.push({name: 'welcome'})
    }
  },
  methods: {
    Router() {
      return Router
    },
    log,
    changeRoute(name: string, index: string) {
      //使用sessionStorage保存当前访问的页，便于刷新时快速跳转
      PageStore.setNowPage(name);
      PageStore.setNowIndex(index);
      router.push({name: name})
    },
    exitLogin() {
      sessionStorage.clear();
      localStorage.clear();
      this.showExitDialog = false
      this.showExitSuccess = true
    }
  }
});
</script>

<style scoped lang="scss">
.index-box {

  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  box-sizing: border-box;

  .content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    box-sizing: border-box;

    .left_panel {
      //background-color: blue;
      height: 100%;
      //border-right: 1px #ccc solid;
      background-color: white;
      width: 14em;
      box-sizing: border-box;
      overflow: hidden;
      position: relative;

      h2 {
        padding: 0 0 0 1em;
      }

      .exit_login_btn {
        position: absolute;
        bottom: 1em;
        left: 1em;
      }
    }

    .right_content {
      background-color: #eee;
      padding: 10px;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      overflow: hidden;
    }
  }
}
</style>
